<template>
  <div class="box">
    <div class="box_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="{
          itemTitle: 'ENTERPRISENAME',
          key: 'ROWNUM',
          menuTitle: 'ENTERPRISENAME'
        }"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce',
          method: 'post',
          data: {
            pageIndex: 0,
            pageSize: 100,
            pageType: 1,
            tableId: 391,
            filterList: []
          }
        }"
        :search-key="'PROGRAMNAME'"
        @select="selectData"
      />
    </div>
    <div class="box_right">
      <div class="box_top">
        <superVisionTop :title="top_title" :list="topList" />
      </div>
      <div class="box_bot">
        <table-common
          ref="tableCommon"
          :menu-id="menuId"
          :flag="flag"
          :form-guid="formGuid"
          :title="title"
          :filter-list="filterList"
        />
      </div>
    </div>
  </div>
</template>
<script>
import superVisionTop from '@/views/XcfundSupervision/components/superVisionTop.vue';
import baseUrl from '@/utils/processRequest1';
import tableCommon from '@/components/tableCommon/index.vue';
import CommonSliderBar from '@/components/CommonSliderBar';
export default {
  components: {
    superVisionTop,
    CommonSliderBar,
    tableCommon
  },
  data() {
    return {
      url: '',
      top_title: '龙景嘉苑消防设施维修',
      topList: [{ num: '1,234.23', title: '预算数' }, { num: '1,234.23', title: '已拨付' }, { num: '1,234.23', title: '未拨付' }],
      menuId: 1623551096894,
      flag: '0',
      formGuid: '',
      title: '文件依据',
      filterList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.Year = localStorage.getItem('chooseYear');
        this.$nextTick(() => {
          this.$refs.silderBar.send();
        });
      });
    },
    selectData(val) {
      console.log(val);
    }

  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box{
   display: flex;
  height: 100%;
}
.box_left{
  width: 13%;
  height: 100%;
  background: #ffffff;
}
.box_right{
    padding: px2vw(24px);
    display: flex;
  flex-direction: column;
  flex: 1;
  .box_top{
  height: 31%;
  display: flex;
  overflow: hidden;
  }
  .box_bot{
    margin-top: px2vw(24px);
  // height: 66%;
  flex: 1;
  overflow: auto;
  background: #ffffff;
  border-radius: 4px;
  padding-left: px2vw(25px);
  }
}
</style>
